<template>
  <div class="main_box" style="padding:10px">
    <el-card class="header-card">
      <div slot="header">
        <div class="header">
          <i @click="returnList" class="el-icon-arrow-left"></i>
          <div class="separater">|</div>
          <div class="title">场所地址：{{ dataInfo.provinceName }}{{ dataInfo.cityName }}{{ dataInfo.areaName }}{{
            dataInfo.streetName }}{{
    dataInfo.address }}</div>
        </div>
      </div>
      <el-row>
        <el-col class="right-info1">
          <el-row class="header-info">
            <el-col class="text-info">
              <el-col>
                <el-col>小区名称:</el-col>
                <el-col>{{ dataInfo.villageName }}</el-col>
              </el-col>
              <el-col>
                <el-col>栋单元层:</el-col>
                <el-col>{{ dataInfo.buildName }}{{ dataInfo.unitName }}{{ dataInfo.floorName }}</el-col>
              </el-col>
              <el-col>
                <el-col>创建人:</el-col>
                <el-col>{{ dataInfo.createUserName }}</el-col>
              </el-col>
              <el-col>
                <el-col>创建时间:</el-col>
                <el-col>{{ dataInfo.createDate }}</el-col>
              </el-col>
              <el-col>
                <el-col>修改人:</el-col>
                <el-col>{{ dataInfo.modifyUserName }}</el-col>
              </el-col>
              <el-col>
                <el-col>修改时间:</el-col>
                <el-col>{{ dataInfo.modifyDate }}</el-col>
              </el-col>
            </el-col>
          </el-row>
        </el-col>
      </el-row>
    </el-card>
    <el-card class="body-card">
      <el-tabs v-model="activeName" @tab-click="tabClick">
        <el-tab-pane label="场所联系信息" name="userInfo">
          <el-form>
            <el-row>
              <el-form-item label="第一紧急联系人/电话:">
                <span>{{ (dataInfo.oneName || '') + "/" + (dataInfo.onePhone || '') }}</span>
              </el-form-item>
              <el-form-item label="第二紧急联系人/电话:">
                <span>{{ (dataInfo.twoName || '') + "/" + (dataInfo.twoPhone || '') }}</span>
              </el-form-item>
              <el-form-item label="第三紧急联系人/电话:">
                <span>{{ (dataInfo.threeName || '') + "/" + (dataInfo.threePhone || '') }}</span>
              </el-form-item>
            </el-row>
          </el-form>
        </el-tab-pane>
        <el-tab-pane label="场所关联的用户信息" name="bindUserInfo">
          <el-table style="width: fit-content" :data="localeCustomerList" border>
            <el-table-column type="index" label="序号" align="center" width="100px">
            </el-table-column>
            <el-table-column prop="localeNickName" label="场所昵称" align="center" width="180">
            </el-table-column>
            <el-table-column prop="name" label="用户名" align="center" width="120">
            </el-table-column>
            <el-table-column prop="phone" label="用户手机" align="center" width="100">
            </el-table-column>
            <el-table-column label="是否主用户" align="center" width="100">
              <template slot-scope="scope">
                <span>{{ scope.row.mainFlag == 1 ? "是" : "否" }}</span>
              </template>
            </el-table-column>
            <el-table-column label="设为主用户" align="center" width="100">
              <template slot-scope="scope">
                <el-switch @change="changeMainUser(scope.row)" :value="scope.row.mainFlag" :active-value="1"
                  :inactive-value="0">

                </el-switch>
              </template>
            </el-table-column>
            <el-table-column prop="relative" label="所属关系" align="center" width="120">
            </el-table-column>
            <el-table-column prop="date" label="创建日期" align="center" width="180">
            </el-table-column>

          </el-table>
        </el-tab-pane>
        <el-tab-pane label="场所关联设备列表" name="equipList">
          <el-table style="width: fit-content" :data="safeEquipList" border highlight-current-row
            :header-row-style="{ 'background-color': '#f2f2f2' }">
            <el-table-column label="序号" width="140px" align="center" type="index"> </el-table-column>
            <el-table-column prop="name" label="设备名称" width="160px" align="center"> </el-table-column>
            <el-table-column prop="equipNickName" label="设备昵称" width="160px" align="center"> </el-table-column>
            <el-table-column prop="" label="类型" width="170" align="center">
              <template slot-scope="scope">
                <div>
                  {{ $Filters.formatSafetyType(scope.row.type) }}
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="code" label="编号" width="230px" align="center"> </el-table-column>
            <el-table-column label="在线状态" lign="center" width="100" align="center">
              <template slot-scope="scope">
                <span>
                  <el-tag size="mini" effect="dark" :type="$Filters.formatEquipStates(scope.row.state)">
                    {{ $Filters.formatEquipState(scope.row.state) }}
                  </el-tag>
                </span>
              </template>
            </el-table-column>
            <el-table-column label="报警状态" width="100" align="center">
              <template slot-scope="scope">
                <el-tag v-if="scope.row.errorState === 0" size="mini" effect="dark" type="success"> 正常 </el-tag>
                <el-tag v-if="scope.row.errorState === 1" size="mini" effect="dark" type="danger"> 报警 </el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="bindDate" label="绑定日期" width="160px" align="center"> </el-table-column>
            <el-table-column label="操作" width="100" align="center">
              <template slot-scope="scope">
                <el-button type="danger" plain icon="fa fa-unlink" @click="handleUnbinding(scope.row)" size="mini"> 解绑
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
      </el-tabs>
    </el-card>
  </div>
</template>

<script>
import LocaleApi from '@/api/address/locale';
export default {
  data() {
    return {
      dataInfo: {},
      localeCustomerList: [],
      safeEquipList: [],
      activeName: 'userInfo'
    };
  },
  computed: {
  },
  mounted() {
    this.getData()
    this.listSafetyEquip()
  },
  methods: {
    tabClick(tab, event) {
      this.activeName = tab.name;
    },
    listSafetyEquip() {
      LocaleApi.listEquip({ localeId: this.$route.query.id }).then((res) => {
        this.safeEquipList = res.data;
      });
    },
    getData() {
      LocaleApi.getLocaleInfo({ id: this.$route.query.id }).then(res => {
        this.dataInfo = res.data
        this.localeCustomerList = res.data.list
      })
    },
    handleUnbinding(row) {
      this.$confirm('确定解绑安全设备吗？', '提示', {}).then((res) => {
        let params = {
          id: row.id,
        };
        LocaleApi.unbindBinding(params).then((res) => {
          if (res.status == 0) {
            this.$Utils.notifySuccess();
            this.listSafetyEquip();
          }
        });
      });
    },
    async changeMainUser(row) {
      console.log(row)
      const { mainFlag, id } = row
      const message = mainFlag ? '确定取消主用户吗' : '确定设置为主用户吗'
      await this.$confirm(message, "提示", {})
      const params = {
        type: 3,
        localeId: this.$route.query.id,
        customerId: id,
      }
      await LocaleApi.customerOperation(params)
      this.$message.success("设置成功")
      row.mainFlag = mainFlag ? 0 : 1
    },
    returnList() {
      this.$store.dispatch('delView', this.$route);
      this.$router.go(-1)
    }
  },

}

</script>


<style lang="scss" src="@/assets/css/views/detailType.scss" scoped></style>

<style lang="scss" >
@import "@/assets/css/views/content.scss"
</style>
